<template>
	<div class="sel">
		<a-space class="sel_A">
			<div>图书名称：</div>
			<a-auto-complete :style="{ width: '360px' }" v-model="bookName" />
			<div>图书类型：</div>
			<a-auto-complete :data="dataType" :style="{ width: '360px' }" v-model="bookType" strict />
			<a-button type="primary" @click="selPage"
				style="width: 180px;height: 40px;display: flex;justify-content: space-evenly;">
				<icon-search /><span>查询</span>
			</a-button>
		</a-space>

		<a-space class="sel_B">
			<a-button style="width: 100px;height: 50px;" @click="del" type="primary">
				<template #icon>
					<icon-delete />
				</template>
				<template #default>删除</template>
			</a-button>
			<a-button @click="AddBook"  type="primary" style="width: 150px;height: 50px;">添加</a-button>
		</a-space>
	</div>
  <a-modal :simple="true" :width="600" v-model:visible="visible" title="新增图书" @cancel="handleCancel"
           :on-before-ok="handleBeforeOk" unmountOnClose>
    <a-form :model="form" :style="{ width: '600px' }">
      <a-form-item field="name" :rules="[{ required: true, maxLength: 20 }]" label="图书名">
        <a-input v-model="form.name" placeholder="love_yike" />
      </a-form-item>
      <a-form-item field="typeid" label="类型" :rules="[{required:true}]">
        <a-radio-group v-model="form.typeid" type="button">
          <a-radio v-for="(item,index) in resBooktype" :key="index" :value="item.id">{{item.type}}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="ISBM" label="ISBM" :rules="[{required:true,message:'请输入13位ISBM'},{type:'number',min:1000000000000,max:9999999999999,message:'请输入13位ISBM'}]">
        <a-input-number v-model="form.ISBM" placeholder="1111111111111" />
      </a-form-item>
      <a-form-item field="作家" label="作家">
        <a-input v-model="form.author" placeholder="郭沫若" />
      </a-form-item>
      <a-form-item field="price" label="价值" :rules="[{required:true,message:'请输入图书价格'},{type:'number',minlength:0,message:'请输入图书价格'}]">
        <a-input-number v-model="form.price" placeholder="193.9" />
      </a-form-item>
      <a-form-item field="press" label="press" :rules="[{required:true,message:'请输入出版社'},{type:'string',maxLength:10,minLength:3,message:'请输入出版社'}]">
        <a-input v-model="form.press" placeholder="人民出版社" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import {
	onBeforeMount,reactive
} from 'vue';
import req from '../../../../req';
import {
	ref
} from 'vue';
import { defineEmits } from 'vue';
const props =defineProps({
  id:Array,
})
// 父传子
const emit = defineEmits(['resdata','ResBookType']);
const form = reactive({
  name:null,
  typeid: null,
  ISBM:null,
  price:null,
  author:null,
  press:null
});


const visible = ref(false);
const AddBook = () => {
  visible.value = true;
}
const handleCancel = () => {
  visible.value = false;
  console.log("关闭")
}
const handleBeforeOk = async () => {
  console.log(form)
  const res = await req({
    url: 'http://localhost:8080/api/book',
    method: 'POST',
    data:{
      name:form.name,
      typeId:form.typeid,
      isbn:form.ISBM,
      press:form.press,
      author:form.author,
      price:form.price,
    },
  })
  return true;
  // prevent close
  // return false;
};



let resBooktype;
let dataType = ref([])
// 查询图书类型
onBeforeMount(() => {
	req({
		url: 'http://localhost:8080/api/booktype/page',
		method: 'GET',
		params: {
			page: 1,
			pagesSize: 100
		}
	}).then(res => {
		resBooktype = res.data.data.records
		for (let index = 0; index < res.data.data.records.length; index++) {
			dataType.value.push(res.data.data.records[index].type)
		}
    emit('ResBookType',resBooktype)
	})
})

const del = () => {
  if (isEmpty(props.id)){
      return
  }
  req({
    url: 'http://localhost:8080/api/book/del',
    method:'POST',
    data:props.id
  }).then(res => {
    if(res.data.code == 200){
      selPage();
    }
  })
}
// 判空
function isEmpty(variable) {
  if (variable == null) return true;
  if (typeof variable === 'string' && variable.trim() === '') return true;
  if (Array.isArray(variable) && variable.length === 0) return true;
  if (typeof variable === 'object' && !Array.isArray(variable) && Object.keys(variable).length === 0) return true;
  return false;
}



let bookName = ref(null);
let bookType = ref(null);
let resdata = ref();
const selPage = () => {
  console.log(bookName.value,bookType.value)
	req({
		url: 'http://localhost:8080/api/book/page',
		method: 'GET',
		params: {
			page: 1,
			pagesSize: 100,
			name: bookName.value,
			type: bookType.value
		}
	}).then(res => {
		resdata.value = res.data.data.records
		let arr = res.data.data.records

		for (let i = 0; i < resdata.value.length; i++) {
			for (let j = 0; j < resBooktype.length; j++) {
				if (arr[i].typeId == resBooktype[j].id) {
					arr[i]['type'] = resBooktype[j].type
				}

				if (arr[i].status == 0) {
					arr[i]['statusString'] = "可借阅"
				}

				if (arr[i].status == 1) {
					arr[i]['statusString'] = "借阅中"
				}

				if (arr[i].status == 2) {
					arr[i]['statusString'] = "归回中"
				}

				if (arr[i].status == 1) {
					arr[i]['statusString'] = "下架"
				}
			}
		}

		emit('resdata', resdata)
	})


}

</script>

<style lang="scss" scoped>
.sel {
	width: 100%;
	height: 100%;
	display: flex;
	color: #000;
  justify-content: space-between;

	.sel_A {
		width: 70%;
		height: 100%;
    display: flex;
    justify-content: space-around;
	}

	.sel_B {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: space-around;
	}
}
</style>
